<template>
  <div class="contanier">
    <div class="title">热门景点简介词云图</div>
    <!-- 盒子将来echarts展示图形图标的节点 -->
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import 'echarts-wordcloud'
import { usetravelStore } from '../../../stores/travel'
let travelStore = usetravelStore()
import 'echarts-wordcloud/dist/echarts-wordcloud' // 词云引入
import 'echarts-wordcloud/dist/echarts-wordcloud.min'




// 定义一个变量来跟踪是否是第一次加载页面
onMounted(() => {
  setTimeout(() => {    
    initmap()
  }, 500)
  setTimeout(() => {    
    initmap()
  }, 500)
  
})
const img = ''
//获取节点
let charts = ref()
const initmap = () => {
  //获取echarts类的实例
  let mycharts = echarts.init(charts.value)
  var maskImage = new Image()
  maskImage.src = img
  mycharts.setOption({
    series: [
      {
        type: 'wordCloud',
        shape: 'circle',
        // maskImage: maskImage,
        // keepAspect: false,
        width: '100%',
        height: '100%',
        maskImage: maskImage,
        left: 'center',
        top: 'center',

        right: null,
        bottom: null,

        sizeRange: [12, 60],

        rotationRange: [-90, 90],
        rotationStep: 45,

        gridSize: 8,

        drawOutOfBound: false,

        shrinkToFit: false,

        layoutAnimation: true,
        data: travelStore.traveldata?.result,
        textStyle: {
          fontFamily: 'sans-serif',
          fontWeight: 'bold',
          // Color can be a callback function or a color string
          color: function () {
            // Random color
            return (
              'rgb(' +
              [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') +
              ')'
            )
          }
        },
        emphasis: {
          focus: 'self',

          textStyle: {
            textShadowBlur: 10,
            textShadowColor: '#333'
          }
        }
      }
    ]
  })

  
}
</script>

<style scoped>
.contanier {
  margin-left: 20px;
}

.title {
  font-weight: 800;
  font-size: 18px;
  margin-left: 10px;
}

.charts {
  width: 100%;
  height: 300px;
  background-color: aliceblue;
  margin-top: 20px;
  border-radius: 20px;
}
</style>
